<template>
	<div>
		<div class="header">
			<h3>商家注册</h3>
		</div>
		<div class="content">
			<div class="left">
			    <div class="lists">
			    	<p class="pLeft">账户名：</p>
			    	<div class="pRight">
				    	<input type="text" v-model="name" placeholder="6-18位英文字母或数字" @blur="changetext()" ref="names"></input>
				    	<p class="name"></p>
			    	</div>
			    </div>

			    <div class="lists">
			    	<p class="pLeft">设置密码：</p>
			    	<div class="pRight">
				    	<input type="password" v-model="password" placeholder="6-18个字符，可使用字母 ,数字,下划线" @blur="changepassword()" ref="password" ></input>
				    	<p class="password"></p>
			    	</div>
			    </div>
			    <div class="lists">
			    	<p class="pLeft">确认密码：</p>
			    	<div class="pRight">
				    	<input type="password" v-model="passwords" placeholder="确认密码"  @blur="changeCount()" ref="passwords"></input>
				    	<p class="passwords"></p>
			    	</div>
			    </div>
			    <div class="lists">
			    	<p class="pLeft">手机号码：</p>

			    	<div class="pRight">
				    	<input type="text" v-model="number" placeholder="有效的手机号" @blur="changenumber()" ref="numbers" ></input>
				    	<p class="numbers"></p>
			    	</div>
			    </div>
			    <div class="lists">
			    	<p class="pLeft">验证码：</p>
			    	<div class="pRight">
			    		<div class="same">
				    		<input type="text" class="phone" v-model="Verification" placeholder="请填写验证码"  @blur="changeVerification()" ref="Verification"></input><button class="phones" @click="GetCode()">获取验证码</button>
				    	</div>
				    	<p class="Verification"></p>
			    	</div>
			    </div>
			     <div class="lists">
			    	<p class="pLeft"></p>
			    	<div class="pRight"><button class="submit" @click="SignIn()">登录</button></div>
			    </div>
			</div>
			<div class="right">
			   <p class="rightOne">
			   		已注册?<button><router-link to="/Login">登录</router-link></button>
			   </p>

			   <p  class="rightTwo">

			   		<img src="../assets/QRcode.png" alt="/" /><br/><br/><br/>
			   		微信扫一扫快速登录
			   </p>
			   <p class="rightThree">
			   		使用合作账号登录<br/>
			   		<button><router-link to="/Login"></router-link></button>
			   		<button><router-link to="/Login"></router-link></button>
			   </p>


			</div>
		</div>
		<ul class="list">
			<li>100%正品</li>
			<li>双重质检</li>
			<li>全球化采购</li>
			<li>无理由退货</li>
			<li>贵就赔</li>
			<li>万千口碑</li>
		</ul>
		<Footers></Footers>
	</div>
</template>

<script>
	import Footers from'@/components/Footers'

	export default{
		data(){
			return{
				name: '',
				password:'',
				passwords:'',
				number:'',
				Verification:'',
				Verifications:'',
				nameO: 'flase',
				passwordO:'flase',
				passwordsO:'flase',
				numberO:'flase',



			}
		},
		components:{
	      Footers,

	    },
		methods: {
		    changetext: function() {
		         var Expression = /^[0-9a-zA-Z_]{6,18}$/ ;
				 var objExp=new RegExp(Expression);
				 if(objExp.test(this.$refs.names.value)==true){
					$(".name").text("用户名格式正确")
		        	$(".name").css("color","green")
		        	this.nameO="true"
		        }else{
		        	$(".name").text("用户名格式不正确")
		        	$(".name").css("color","red")
		        	this.nameO="flase"
		        }

		    },
		    changepassword: function() {
		         var Expression = /^[0-9a-zA-Z_]{6,18}$/ ;
	             var objExp=new RegExp(Expression);
				if(objExp.test(this.$refs.password.value)==true){
		        	$(".password").text("密码格式正确")
		        	$(".password").css("color","green")
		        	this.passwordO="true"
		        }else{
		        	$(".password").text("密码格式不正确")
		        	$(".password").css("color","red")
		        	this.passwordO="flase"
		        }

		    },
		    changeCount: function() {
		        if(this.$refs.passwords.value!=this.password){
		        	$(".passwords").text("两次密码不一致")
		        	$(".passwords").css("color","red")
		        	this.passwordsO="flase"
		        }else if(this.$refs.passwords.value==""){
		        	$(".passwords").text("不能为空")
		        	$(".passwords").css("color","red")
		        	this.passwordsO="flase"
		        }else{
		        	$(".passwords").text("两次密码一致")
		        	$(".passwords").css("color","green")
		        	this.passwordsO="true"
		        }

		    },
		    changenumber: function() {
		        var Expression=/^1[34578]\d{9}$/;
	 			var objExp=new RegExp(Expression);
		        if(objExp.test(this.$refs.numbers.value)==true){
		        	$(".numbers").text("手机号格式正确")
		        	$(".numbers").css("color","green")
		        	this.numberO="true"
		        }else{
		        	$(".numbers").text("手机号格式不正确")
		        	$(".numbers").css("color","red")
		        	this.numberO="flase"
		        }

		    },
		    changeVerification: function() {
		        if(this.$refs.Verification.value==""){
		        	$(".Verification").text("验证码不能为空")
		        	$(".Verification").css("color","red")
		        	this.flog="flase"
		        }else if(this.$refs.Verification.value!=this.Verifications){
		        	$(".Verification").text("验证码错误")
		        	$(".Verification").css("color","red")
		        	this.flog="flase"
		        }else{
		        	$(".Verification").text("验证码正确")
		        	$(".Verification").css("color","green")
		        	this.flog="true"
		        }

		    },
		    GetCode:function(){

			 this.$http({
		                    method:'GET',
		                    url:'http://www.wutongsd.com/awm/expertsDetails.do?id=44',


		                    emulateJSON: true

			            }).then(function(data){
//			                console.log(data.body.education)
			                this.Verifications=data.body.education

			            },function(error){

			              	alert("333")

			            })


		    },
		    SignIn:function(){
		    	 if(this.$refs.names.value==""){
				    	 	 this.$alert('账户名不能为空', '', {
					          confirmButtonText: '确定',
					         });
		    	 }else if(this.nameO=="flase"){
		        	       this.$alert('用户名格式不正确', '', {
					          confirmButtonText: '确定',
					         });
		        }else if(this.$refs.password.value==""){
		        	       this.$alert('密码不能为空', '', {
					          confirmButtonText: '确定',
					         });
		        }else if(this.passwordO=="flase"){
		        	       this.$alert('密码格式不正确', '', {
					          confirmButtonText: '确定',
					         });
		        }else if(this.$refs.passwords.value==""){
		        	       this.$alert('确认密码不能为空', '', {
					          confirmButtonText: '确定',
					         });
		        }else if(this.passwordsO=="flase"){
		        	       this.$alert('两次密码不一致', '', {
					          confirmButtonText: '确定',
					         });
		        }else if(this.$refs.numbers.value==""){
		        	     this.$alert('手机号码不能为空', '', {
					          confirmButtonText: '确定',
					         });
		        }else if(this.numberO=="flase"){
		        	       this.$alert('手机号格式不正确', '', {
					          confirmButtonText: '确定',
					         });
		        }else if(this.$refs.Verification.value==""){
		        	   this.$alert('验证码不能为空', '', {
					          confirmButtonText: '确定',
					         });
		        }else if(this.$refs.Verification.value!=this.Verifications){
		        		 this.$alert('验证码错误', '', {
					          confirmButtonText: '确定',
					         });
		        }else{
		        		 this.$http({
		                    method:'GET',
		                    url:'http://www.wutongsd.com/awm/expertsDetails.do?id=44',


		                    emulateJSON: true

			            }).then(function(data){
			                alert("成功")

			            },function(error){

			              	alert("失败")

			            })
		        }
		    },


		}
	}
</script>

<style scoped>

.header{
	width:1060px;
	height:120px;
	margin:0 auto;
	background:url(../assets/logo.png) no-repeat 8px;
}
.header h3{
	height:120px;
	line-height:120px;
	font-size:21px;

	text-align: left;
	margin-left:220px;
}
.content{
	height:460px;
	margin:0 auto;
	width:1060px;
	border:1px solid #aaaaaa;
	overflow: auto; zoom: 1;
}
.content .left{
	width:540px;
	height:390px;
	border-right:1px solid #ccc;
	float:left;
	margin-top:30px;
}
.content .right{
	width:320px;
	height:390px;
	margin-top:30px;
	float:left;
	margin-left:100px;
}
.rightOne{
	height:56px;
	width:316px;
	border-bottom:1px solid #aaa;
	font-size:17px;
	line-height:34px;

}
.rightOne button{
	height:36px;
	width:60px;
	margin-left:14px;
	background:#459dff;
	font-size:17px;
	border:none;

}
.rightOne button a{
	color:#fff

}
.rightTwo{
	padding-top:20px;
	height:220px;
	border-bottom:1px solid #aaa;
	font-size:14px;
}
.rightThree{
	text-align: left;
	margin-top:20px;
	font-size:14px;

}
.rightThree button{
	height:30px;
	width:30px;
	margin:20px 30px 0 0;
	border:none;

}
.rightThree button:nth-child(2){

	background:url(../assets/wechat.png) no-repeat;
	background-size:30px 30px;
}
.rightThree button:nth-child(3){

	background:url(../assets/qq.png) no-repeat;
	background-size:30px 30px;
}
.list{
	height:182px;
	margin:0 auto;
	width:1060px;
	overflow: auto; zoom: 1;

}
.list li{
	float:left;
	height:182px;
	width:163px;
	background:red;
	text-align:right;
	line-height:270px;

}
.list li:nth-child(1){
	background:url(../assets/three.png) no-repeat 101px 42px;
}
.list li:nth-child(2){
	background:url(../assets/four.png) no-repeat 101px 42px;

}
.list li:nth-child(3){
	background:url(../assets/five.png) no-repeat 101px 42px;

}
.list li:nth-child(4){
	background:url(../assets/six.png) no-repeat 101px 42px;

}
.list li:nth-child(5){
	background:url(../assets/two.png) no-repeat 101px 42px;

}
.list li:nth-child(6){
	background:url(../assets/one.png) no-repeat 101px 42px;

}
.lists{
	overflow: auto; zoom: 1;
	height:67px;

	width:530px;
}
.pLeft{
	float:left;
	height:67px;
	width:120px;
	text-align:right;
}
.pRight{
	float:right;
	height:67px;
	width:380px;
}
.pRight input{
	width:280px;
	height:36px;
	text-align:left;
	border:1px solid #aaa;
	text-indent: 10px;

}
.pRight .phone{
	width:65%;
	height:36px;
	border:none;

}
.pRight  .phones{
	width:35%;
	background:#7ab9ff;
	height:36px;
	border:none;
	font-size:14px;
	color:#fff;
}
.lists .submit{
	width:280px;
	text-align:left;
	height:36px;
	border:none;
	background:#4ca1ff;
	text-align:center;
	color:#fff;
	font-size:17px;
}
.same{
    width:280px;
	height:36px;
    border: solid 1px #aaa;
    margin:0 auto;

}
.pRight p{
	height:25px;
	width:280px;

	margin:0 auto;
	text-align:left;
	line-height:25px;
	color:red;
	text-indent: 2px;
}
</style>
